<%@page import="com.easyattendance.model.Section"%>
<%@page import="com.easyattendance.services.AddSectionService"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
	
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.Iterator" %>
<%@ page import ="com.easyattendance.services.AddClassService" %>
<%@ page import ="com.easyattendance.model.Class" %>
<%@ page import ="com.easyattendance.services.AddTeacherService" %>
<%@ page import ="com.easyattendance.model.Teacher" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Section - Add Class</title>
<!-- <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> -->
<jsp:include page="../includeFiles.jsp" ></jsp:include>

</head>

<!--
		Note: Set the body element's class to "left-sidebar" to position the sidebar on the left.
		Set it to "right-sidebar" to, you guessed it, position it on the right.
	-->
<body class="left-sidebar">

<!-- Session check : user logged in or not/ press back button -->
<jsp:include page="../common/checkSession.jsp"></jsp:include>
<jsp:include page="../common/checkSectionRole.jsp" />

<% String currentUser = (String) session.getAttribute("currentUser"); %>
	<!-- Wrapper -->
	<div id="wrapper">

		<!-- Content -->
		<div id="content">
			<div id="content-inner">
			
				<div id="login_content">
						<header>
							<h2>Add Class</h2>
						</header>
						<span class="error_msg">${null_values}</span>
						<span class="error_msg">${teacherExists}</span>
						<span class="error_msg">${classExists}</span>
						<span class="success_msg">${classAdded}</span>
						<span class="error_msg">${classNotAdded}</span>
						<span class="error_msg">${validate_class_email}</span>
						<span class="error_msg">${validate_class_passwords}</span>
						<span class="error_msg">${validate_class_name}</span>
						<div class="submit_errors_msg">
							<ul>
								<li id="submit_is_field_empty" class="submit_errors">All fields are required. You must select at least 1 from drop-down.</li>
								<li id="submit_name_error" class="submit_errors">Name must be between 2 to 50 characters, allowed characters:A-Za-z0-9</li>
								<li id="submit_email_error" class="submit_errors">Email-id is invalid.</li>
								<li id="submit_pass_error" class="submit_errors">Password : at least 8 characters, 1 upper-case, number & special character.</li>
								<li id="submit_pass_compare_error" class="submit_errors">Passwords must be similar.</li>
							</ul>
						</div>
						
						<form name="classForm" action="${pageContext.request.contextPath}/AddClassServlet" action="post" onsubmit="return checkFormErrors();">
						
							<!-- Hidden fields -->
							<input type="hidden" id="action_type" name="action_type" value="create">
							
							
							<!-- Class Name -->
							<div>
								<label>Class Name: <span class="error_msg">*</span></label>
								<input id="class_name" name="class_name" type="text" placeholder="Class Name" maxlength="50" tabindex="1">
							</div>
							<div id="name_error" class="error_info">
								<ul>
									<li id="name_empty" class="invalid">Class name can't be empty.</li>
									<li id="name_length" class="invalid">Length must be between 2 to 32.</li>
									<li id="name_invalid" class="invalid">Only alphanumeric characters.</li>
								</ul>
							</div>
							
						    <div>
								<label>Select Division: <span class="error_msg">*</span></label>
								<select name="select_division" id="select_division" tabindex="2">
									<option value="">Select Division
									<option value="A">A
									<option value="B">B
								</select>
							</div> 
							
							<!-- Common Student ID -->
							
							<div>
								<label>Student Email ID: <span class="error_msg">*</span></label>
								<input id="stud_email" name="stud_email" type="email" placeholder="Common Student Email ID" maxlength="50" tabindex="3">
							</div>
							<!-- Email Validation error and success message area. -->
							<div id="email_error" class="error_info">
								<ul>
									<li id="email_empty" class="invalid">Email address cannot be empty.</li>
									<li id="email_invalid" class="invalid">Valid email address?</li>
								</ul>
							</div>
							<!-- Common Student Password -->
							<div>
								<label>Password: <span class="error_msg">*</span></label> 
								<input id="stud_password" name="stud_password" type="password" placeholder="Password" maxlength="50" tabindex="4">
							</div>
							<!-- Password Validation error and success message area. -->
							<div id="pass_error" class="error_info">
								<ul>
									<li id="letter" class="invalid">At least <strong>one letter</strong></li>
									<li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
									<li id="number" class="invalid">At least <strong>one number</strong></li>
									<li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
									<li id="character" class="invalid">At least <strong>one special character</strong></li>
								</ul>
							</div>
							<!-- Re-enter Password -->
							<div>
								<label>Confirm Password: <span class="error_msg">*</span></label> 
								<input id="stud_repassword" name="stud_repassword" type="password" placeholder="Re-enter Password" maxlength="50" tabindex="5">
							</div>
							<!-- Compare Passwords. -->
							<div id="compare_pass_error" class="error_info">
								<ul>
									<li id="compare_pass" class="invalid">Passwords must be similar & non-empty.</li>
								</ul>
							</div>
							<div>
								<label>Number of Electives: <span class="error_msg">*</span></label>
								<input id="no_of_electives" name="no_of_electives" type="number" min="0" placeholder="Number of Electives" tabindex="6">
							</div>
							<!-- Term type -->
							<div>
								<label>Select term type: <span class="error_msg">*</span></label>
								<select tabindex="6" name="select_term_type" id="select_term_type">
									<option value="Semester">Semester
									<option value="Year">Year
								</select>
							</div>  
							
							<!-- Class Teacher Name -->
							<div>
								<label>Class Teacher Name: <span class="error_msg">*</span></label>
								<select tabindex="7" name="teacher_select" id="teacher_select">
									<option value="">Choose Class Teacher
										<% AddTeacherService addTeacherService = new AddTeacherService();	
										List<Teacher> teacherList = new ArrayList<Teacher>();
										//get list of all teachers who are not already class teachers
										teacherList = addTeacherService.listNoneClassTeachers(currentUser);
										//teacherList = addTeacherService.listTeachers(currentUser);
										Teacher tempTeacher = null;
										Iterator<Teacher> teacherItr = teacherList.iterator();
								
										while(teacherItr.hasNext()) { %>
											<% tempTeacher = (Teacher) teacherItr.next();
												String teacherName = tempTeacher.getTeacher_name()+" "+tempTeacher.getTeacher_lname();
												String teacherId = tempTeacher.getTeacher_id(); %>
									<option value=<%=teacherName%>><%= teacherName %>
									<% } %>
								</select>
							</div>
							
							<!-- <input type="hidden" name="term_type_selected" id="term_type_selected" value="semester"/>   -->
							<input type="hidden" name="teacher_name" id="teacher_name" value="">
							 
							<div>	
								<input type="submit" value="Add Class" class="button" tabindex="7" style="width: 50%;margin: 0 25%;">
								<!-- <input type="button" value="Cancel" class="button"> -->
							</div>
						</form>
					</div>
			
			</div>
		</div>

		<!-- Sidebar -->
		<div id="sidebar">

			<!-- Sidebar Header - Logo & Name -->
			<jsp:include page="../common/sidebarHeader.jsp" ></jsp:include>

			<jsp:include page="sectionMenu.jsp" />
							
			<!-- Sidebar Footer Content -->
			<jsp:include page="../common/sidebarFooter.jsp" />

		</div>

	</div>
	<script type="text/javascript">
		$(function(){
			$("#classSettings").addClass("current_page_item");
		});
	</script>
	
	<script type="text/javascript">
	$(".submit_errors_msg").hide();
	$(".submit_errors").hide();
	
	function checkFormErrors(){
		if(isAnyFieldEmpty($('#class_name'),$('#select_division'),$('#stud_email'),$('#stud_password'),$('#stud_repassword'),$('#no_of_electives'),$('#teacher_select'))){
			return checkForm($('#submit_name_error'),$('#submit_email_error'),$('#submit_pass_error'),$('#submit_pass_compare_error'));
		}
		return false;
	}
	
	/* Email Password Validation Function Call in validate.js */
		$("#stud_email").keyup(function() {
			isEmailValid($("#stud_email"));
		});
		$("#class_name").keyup(function() {
			isNameValid($("#class_name"));
		});
		$("#teacher_name").keyup(function() {
			isNameValid($("#teacher_name"));
		});
		$("#stud_password").keyup(function() {
			isPasswordValid($("#stud_password"));
		});
		$("#stud_repassword").keyup(function() {
			isPasswordSame($("#stud_password"),$("#stud_repassword"));
		});
		
		// Get Dropdown list values
	<!--
		$("#select_sem_year_type").change(function() {
			var sem_year_type = $("#select_sem_year_type :selected").val();

			$("#sem_year_type_selected").val(sem_year_type);
			console.log($("#sem_year_type_selected").val());
		});
		
		-->
		
		$("#select_division").change(function() {
			var division = $("#select_division :selected").val();

			$("#division").val(division);
			console.log($("#division").val());
		});
		
			$("#teacher_select").change(function() {
				var teacher_name = $("#teacher_select :selected").val();

				$("#teacher_name").val(teacher_name);
				console.log($("#teacher_name").val());

		});
	</script>

</body>
</html>